<template>
	<div class="nav">
		<span class="userAddress clear">所在地区：{{autolocation}}</span>
		<div class="clear"><i>你好:</i><i id="userId">{{userphone}}</i><span>退出</span><span><router-link to="/myself/myorder">我的订单</router-link></span><span><router-link to="/myself/mynew">我的消息</router-link></span><span>我是商家</span><i
			class="iconfont icon-xiaochengxu_tubiao"></i><span class="phone">400-800-8820</span></div>
	</div>
</template>

<script>
	import AMap from 'AMap' // 引入高德地图
	export default {
		data() {
			return {
				autolocation: '北京',
				userphone:null,
			}
		},
		mounted() {
			this.getLocation();
			this.userphone=localStorage.getItem("userphone");
		},
		methods: {
			// 获取定位
			getLocation() {
				const _this = this;
				AMap.plugin('AMap.CitySearch', function() {
					var citySearch = new AMap.CitySearch()
					citySearch.getLocalCity(function(status, result) {
						if (status === 'complete' && result.info === 'OK') {
							// 查询成功，result即为当前所在城市信息
							window.console.log('通过ip获取当前城市：', result.city);
							_this.autolocation = result.city;
						}
					})
				});
			}
		}
	}
</script>

<style>
	.nav {
		width: 100%;
		height: 36px;
		background-color: #eeeeee;
		line-height: 36px;
	}

	.nav .userAddress {
		margin-left: 13.67%;
		float: left;
	}

	.nav div {
		float: left;
		margin-left: 15.5%;
		height: 16px;
		line-height: 16px;
		margin-top: 8px;
	}

	.nav div i {
		font-style: normal;
	}

	#userId {
		color: #4b943d;
	}

	.nav div span {
		display: inline-block;
		width: 83px;
		text-align: center;
		border-right: 1px solid black;
		cursor: pointer;
	}

	.nav div .phone {
		width: 200px;
		text-align: left;
		border: none;
	}

	.icon-xiaochengxu_tubiao {
		color: #4b943d;
	}
	.nav a{
		color: #000000;
	}
</style>
